<template>
	<view class="container">
		<text class="title" v-show="istitle" style="width: 100%;height: 50upx;line-height: 50upx;font-size: 15px;color: red;text-align: center;display: inline-block;margin-top: 20upx;">{{title}}</text>
		<view class="addr">
			<view class="addr-line b-b">
				<text class="title">店铺名称</text>
				<input placeholder="请输入店铺名" type="text" class="value" v-model="shopInfo.smallname" />
			</view>
			<view class="addr-line b-b">
				<text class="title">商家电话</text>
				<input type="number" placeholder="请输入商家电话" v-model="shopInfo.mobile" class="mobile-value"></input>
			</view>
			<view class="addr-line b-b" @tap="chooseLocation">
				<text class="title">详细地址</text>
				<input type="text" placeholder="请选择详细地址" class="mobile-value" v-model="shopInfo.address"disabled='true' />
				<text class="wlIcon-dizhi wanl-text-red" ></text>
			</view>
			
			<view class="addr-line b-b">
				<text class="title">营业执照</text>
				<navigator :url="'/pages/user/common/uploadpic?type=7'" class="value">
					<view class="valueEx">{{shopInfo.yingyezhizhao == ""||shopInfo.yingyezhizhao == null ? "未上传" : "已上传"}}</view>
					<view class="valueFix">
						<text>{{shopInfo.yingyezhizhao == "" ||shopInfo.yingyezhizhao == null? "去上传" : "去更改"}}</text>
					</view>
					<text class="wlIcon-fanhuigengduo wanl-text-black"></text>
				</navigator>
			</view>
			<view class="addr-line b-b">
				<text class="title">行业资质</text>
				<navigator :url="'/pages/user/common/uploadpic?type=6&'" class="value">
					<view class="valueEx">{{shopInfo.zizi == ''||shopInfo.zizi == null ? '未上传' : '已上传'}}</view>
					<view class="valueFix">
						<text>{{shopInfo.zizi == ''||shopInfo.zizi == null ? '去上传' : '去更改'}}</text>
					</view>
					<text class="wlIcon-fanhuigengduo wanl-text-black"></text>
				</navigator>
			</view>
		</view>
		<text class="mix-btn" @click="confirm">提交</text>
	</view>
</template>

<script>
	import {  
	    mapState ,
		mapMutations
	} from 'vuex';
	import cityDatas from '@/components/addr-select/city.area.js';
	export default {
		data() {
			return {
				shopInfo: {},
				provinceData: cityDatas,
				cityData: [],
				areaData: [],
				multiArray: [[],[],[]],
				multiIndex: [0, 0, 0],
				selectedArea: '请选择',
				title:'',
				istitle:false,
			}
		},
		onLoad(){
			this.loadData();
		},
        computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['login','logout']),
			fpNumInput(e) {
				const o = e.target;
				const inputRule =/[\W]/g;
				this.$nextTick(function() {
				    this.shopInfo.username = o.value.replace(inputRule , '');
				})
			},
			password(event){
				this.shopInfo.password=event.detail.value;
			},
			chooseLocation(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.shopInfo.Longitude = res.longitude;
						this.shopInfo.Latitude = res.latitude;
						this.shopInfo.address = res.name;
						//console.log(this.merchantInfo.Addr)
					}
				})
			}, 
			loadData(){
				this.$api.get({
					url: '/wanlshop/Shop/addshopinfo',
					success: res => {
						this.shopInfo = res;
						console.log(this.shopInfo)
						if(this.shopInfo.state==1){
							this.title='已通过审核';
							this.istitle=true;
						}
						if(this.shopInfo.state==2){
							this.title='审核未通过';
							this.istitle=true;
						}
						if(this.shopInfo.state==3){
								this.istitle=false;
											}
						if(this.shopInfo.state==0){
							this.title='审核中';
							this.istitle=true;
						}
					}
				});
			},
			//初始化所属区域
			
			getIndexInAreaListByCode(code,list){
				for(var i = 0; i < list.length; i++){
					if(list[i].code == code){
						return i;
					}
				}
			},
			getIndexInAreaListByName(name,list){
				for(var i = 0; i < list.length; i++){
					if(list[i].name == name){
						return i;
					}
				}
				return -1;
			},
			bindArea(){
				if(this.multiArray[2].length == 0){
					this.selectedArea = this.multiArray[0][this.multiIndex[0]].name + '   ' + this.multiArray[1][this.multiIndex[1]].name;
				}else{
					this.selectedArea = this.multiArray[0][this.multiIndex[0]].name + '   ' + this.multiArray[1][this.multiIndex[1]].name + '   ' + this.multiArray[2][this.multiIndex[2]].name;
				}
			},
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.multiArray[1] = cityDatas[this.multiIndex[0]].cityList;
						this.multiArray[2] = cityDatas[this.multiIndex[0]].cityList[0].areaList;
						this.multiIndex.splice(1, 1, 0)
						this.multiIndex.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						this.multiArray[2] = cityDatas[this.multiIndex[0]].cityList[this.multiIndex[1]].areaList;
						this.multiIndex.splice(2, 1, 0)
						break
				}
				if(this.multiArray[2].length == 0){
					this.selectedArea = this.multiArray[0][this.multiIndex[0]].name + '   ' + this.multiArray[1][this.multiIndex[1]].name;
				}else{
					this.selectedArea = this.multiArray[0][this.multiIndex[0]].name + '   ' + this.multiArray[1][this.multiIndex[1]].name + '   ' + this.multiArray[2][this.multiIndex[2]].name;
				}
				this.$forceUpdate()
			},
			toUploadPic(index){
				console.log('111')
				console.log(index)
				if(index == 1){
					//更改门头照
					uni.navigateTo({
						url: "/pages/user/common/uploadpic?type=4&image=" + this.shopInfo.DoorPic
					})
				}else if(index == 2){
					//更改营业执照
					uni.navigateTo({
						url: "/pages/user/common/uploadpic?type=5&image=" + this.shopInfo.yingyezhizhao
					})
				}
			},
			//提交
			confirm() {
				let shopInfo = this.shopInfo;
				if (!shopInfo.smallname) {
					this.$wanlshop.msg('请填写店铺名称！');
					return;
				}
				if (!shopInfo.mobile) {
					this.$wanlshop.msg('请填写商家电话号码！');
					return;
				}
				if(shopInfo.zizi == ''||shopInfo.zizi == null){
					this.$wanlshop.msg('请上传资质证明！');
					return;
				}
				if(shopInfo.yingyezhizhao == ''||shopInfo.yingyezhizhao == null){
					this.$wanlshop.msg('请上传营业执照！');
					return;
				}
				// if (!shopInfo.address) {
				// 	this.$api.msg('请填写商家地址！');
				// 	return;
				// }
				this.$api.post({
					url:'/wanlshop/Shop/editshopinfo',
					data: {
						"smallname": shopInfo.smallname,
						"mobile": shopInfo.mobile,
						"address": shopInfo.address,
					},
					success: res => {
						this.$wanlshop.msg('提交成功');
						}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.map:before{
		content: "\e602";
		color: #d81e06;
		font-size: 75upx;
		flex: 1;
		text-align: right;
		line-height: 100upx;
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	.addr{
		margin: 20upx 25upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		.addr-line{
			display: flex;
			flex-direction: row;
			position:relative;
			padding: 0 20upx;
			color:#75787d;
			align-items: center;
			.title{
				width: 30%;
				height: 100upx;
				line-height: 100upx;
				font-size: $font-base;
			}
			.mobile-value{
				width: 65%;
				height: 100upx;
				font-size: $font-base;
			}
			.picker{
				width: 65%;
				height: 100upx;
				display: flex;
				align-items: center;
			}
			.value{
				width: 65%;
				height: 100upx;
				display: flex;
				flex-direction: row;
				font-size: $font-base;
				align-items: center;
				.picker{
					width: 90%;
				}
				.multipicker{
					width: 100%;
				}
				.valueEx{
					width: 78%;
					height: 100upx;
					line-height: 100upx;
					padding-right: 50upx;
					font-size: $font-base;
				}
				.valueFix{
					width: 22%;
					height: 100upx;
					line-height: 100upx;
					font-size: $font-base;
				}
				&.b-b:after{
					left: 0upx;
				}
			}
			&.b-b:after{
				left: 0upx;
			}
		}
	}
	.icon-xia{
		font-size: $font-lg;
		color: $font-color-light;
		flex: 1;
		text-align: right;
		line-height: 100upx;
	}
	.icon-you{
		font-size: $font-lg;
		color: $font-color-light;
		flex: 1;
		text-align: right;
		line-height: 100upx;
	}
</style>
